<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib uri="/WEB-INF/html.tld" prefix="html" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>

<c:url var="financialCalculator" value="/admin/financial/calculator" />
		<div class="content-backgroud">

<form:form id="financialProduct" modelAttribute ="calculator" method="POST" >
	<html:table attributes="class='inputTable'">
	<html:tr>
    <html:td attributes="colspan='2' valign='top'">
    <html:table>
      <html:tr>
	     
	    <html:td><label>Financed Amount</label></html:td>
	    <html:td><form:input path="calcOption.financedAmount" class='required'/></html:td>
	    </html:tr>
	     <html:tr>
	    <html:td><label>Term</label></html:td>
	    <html:td><form:select path="calcOption.term" class='required' items="${lovBean.list('TERM')}" /></html:td>
	    </html:tr>
	     <html:tr>
	    <html:td><label>Amortization</label></html:td>
	    <html:td><form:select path="calcOption.amortization" items="${lovBean.list('TERM')}"/></html:td>
	    </html:tr>
	     <html:tr>
	    <html:td><label>Rate</label></html:td>
	    <html:td><form:input path="calcOption.rate"/></html:td>
	   
	  </html:tr>
	  
    </html:table>
    
    </html:td>
     <html:td attributes="colspan='2' valign='top'">
    <html:table  attributes="class='claculator-widget'">
      <html:tr>
	     
	    <html:td attributes="align='right'"><label>Financed Amount</label></html:td>
	    <html:td attributes="align='left'"><div id='financedAmount'>0:00</div></html:td>
	    </html:tr>
	     <html:tr>
	    <html:td attributes="align='right'"><label>Term</label></html:td>
	    <html:td  attributes="align='left'"><div id='term'>0:00</div></html:td>
	    </html:tr>
	     <html:tr>
	    <html:td attributes="align='right'"><label>Amortization</label></html:td>
	    <html:td attributes="align='left'"><div id='amortization'>0:00</div></html:td>
	    </html:tr>
	     <html:tr>
	    <html:td attributes="align='right'"><label>Rate</label></html:td>
	    <html:td attributes="align='left'"><div id='rate'>0:00</div></html:td>
	   
	  </html:tr>
	  
	   <html:tr>
	    <html:td attributes="align='right'"><label>Monthly EMI</label></html:td>
	    <html:td attributes="align='left'"><div id='monthlyEmi'>0:00</div></html:td>
	   
	  </html:tr>
	  
	  <html:tr>
	    <html:td attributes="align='right'"><label>Total Interest</label></html:td>
	    <html:td attributes="align='left'"><div id='totalInterest'>0:00</div></html:td>
	   
	  </html:tr>
	  
	  <html:tr>
	    <html:td attributes="align='right'"><label>Total Amount</label></html:td>
	    <html:td attributes="align='left'"><div id='calculatedAmount'>0:00</div></html:td>
	   
	  </html:tr>
	  
    </html:table>
    
    </html:td>
  </html:tr>
	
	</html:table>
	<form:hidden path="financial.financialProductId"  />
</form:form>
</div>
<div id="toolbar-options" style="float:right">
	<a id="btnCalculate" >Calculate</a>
	
</div>	
<script>
$(function () {
	$( "#toolbar-options>a" ).button(); 
	$( ".button-holder #toolbar-options").remove();
	$( ".button-holder").append($( "#toolbar-options" ));
	
	$("#btnCalculate").on("click",function(){
		
		jQuery.ajaxSettings.traditional = true;
	
		var formData = $("#financialProduct").serializeObject();
		//formData.rateCards=assignedRate;
	
		var params={url:"/finance/calculate",success:onSuccess,data:formData,type:"POST",dataType:"json"};
		doAjax(params);
		return false;
	});
	
    function onSuccess(result)
    {
    	 console.log(result);
    	 
    	 $.each(result, function(k, v) {
    		 console.log(k);
    		 $('div#'+k).text(v);
    		});
    	 
    	 $.each(result.options, function(k, v) {
    		 console.log(k);
    		 $('div#'+k).text(v);
    		});
    	 
    	
    }
 });
</script>
